<template>
  <el-card
    v-for="(question, index) in questionList"
    :key="question.questionId"
    :class="[index === 0 ? '' : 'question__card-margin']"
    class="question__card"
  >
    <div class="question__left">
      <div class="question__title">
        <span class="question__title-active"
          >[{{ getQuestionType(question) }}]</span
        >
        <span>{{ question.questionTitle }}</span>
      </div>

      <div v-if="getQuestionAnswerList(question)" class="question__select">
        <el-radio
          :disabled="true"
          v-for="(answer, answerIndex) in getQuestionAnswerList(question)"
          :key="answerIndex"
          :label="true"
          v-model="answer.rightState"
          size="large"
          >{{ answer.optionLabel }}{{ answer.content }}</el-radio
        >
      </div>

      <div class="question__tags">

        <span class="question__tag question__tag-blue">{{
          getQuestionLevel(question)
        }}</span>
        <!-- <span class="question__tag question__tag-blue"
          >{{ question.year }}年</span
        > -->

        <!-- <span v-if="question.majorName" class="question__tag question__tag-green"
          >{{ question.majorName }}</span
        > -->
        <span v-if="question.courseName" class="question__tag question__tag-green"
          >{{ question.courseName }}</span
        >
      </div>
    </div>

    <div class="question__right">
      <slot name="handle" :data="question">
        <el-button
          link
          type="primary"
          icon="Edit"
          @click="handleUpdate(question)"
          v-hasPermi="['examination:question:edit']"
          >修改</el-button
        >
        <el-button
          link
          type="primary"
          icon="Delete"
          @click="handleDelete(question)"
          v-hasPermi="['examination:question:detele']"
          >删除</el-button
        >
      </slot>
    </div>
  </el-card>
</template>

<script setup>
const props = defineProps({
  questionList: {
    type: Array,
    required: true,
    default: () => [],
  },
  source: {
    type: Number,
    default: 0,
  },
});

const emit = defineEmits(["handleUpdate", "handleDelete", "handleAdd"]);

function handleUpdate(row) {
  emit("handleUpdate", row);
}

function handleDelete(row) {
  emit("handleDelete", row);
}

function handleAdd(row) {
  emit("handleAdd", row);
}

const questionTypeMap = {
  1: "单选题",
  2: "多选题",
  3: "判断题",
  4: "填空题",
  5: "程序题",
  6: "简答题",
};

const questionLevelMap = {
  1: "简单",
  2: "中等",
  3: "困难",
};

// <!-- 题型;题目类型；1-单选，2-多选，3-判断;关联dict表中的code列，dict_key为question_type题目类型；1-单选，2-多选，3-判断; -->
const getQuestionType = (row) => {
  return questionTypeMap[row.questionType];
};

// 难易程度 1简单，2中等 3困难
const getQuestionLevel = (row) => {
  return questionLevelMap[row.hardLevel];
};

const getQuestionAnswerList = (row) => {
  if (`${row.questionType}` === `3`) {
    const rightAnswersArr = JSON.parse(row.rightAnswers);
    return [
      {
        optionLabel: "",
        content: "正确",
        rightState:
          rightAnswersArr &&
          rightAnswersArr.length &&
          rightAnswersArr[0] === "正确",
      },
      {
        optionLabel: "",
        content: "错误",
        rightState:
          rightAnswersArr &&
          rightAnswersArr.length &&
          rightAnswersArr[0] === "错误",
      },
    ];
  }

  return row.questionAnswerList;
};
</script>

<style lang="scss" scoped>
// ::v-deep .el-card {
// }
::v-deep .el-card__body {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.question {
  &__card-margin {
    margin-top: 15px;
  }

  &__left {
    flex: 1;
    padding-right: 10px;
  }

  &__right {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    padding-right: 5px;
  }

  &__title {
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    line-height: 56px;
    color: #606266;
    line-height: 25px;
  }

  &__title-active {
    color: #409eff;
    margin-right: 4px;
  }

  &__select {
    color: #666;
  }

  &__tags {
    align-items: center;
    margin-top: 3px;
  }

  &__tag {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 8px;
    margin-right: 8px;
    font-size: 12px;
  }

  &__tag-blue {
    background-color: rgba(41, 114, 250, 0.1);
    color: #2972fa;
  }

  &__tag-green {
    background-color: rgba(30, 168, 48, 0.1);
    color: #1ea830;
  }
}
</style>
